<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Html application</title>
<meta charset="utf-8" />	
<link rel="stylesheet" href="style.css" type="text/css" />

<style>
 /* CSS for custom nav controls of Cube Slider 2. Remove if desired */

ul.cubeslider2-navarea{
list-style: none;
overflow: hidden;
}

ul.cubeslider2-navarea li{
display: block;
float: left;
cursor: pointer;
padding: 7px;
margin:right: 5px;
}

ul.cubeslider2-navarea li:hover{
background: lightyellow;
}

</style>


<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/modernizr.custom.13303.js'></script>
<script type='text/javascript' src='js/jquery.shockwave.js'></script>
<script type='text/javascript' src='js/jquery.shockwave.effects.js'></script>


<script>

var imagesDataArray = [ //For demos, define a single set of images to be used in all of the demos below
   {
      src: 'images/bonsai.jpg',
      url: 'http://en.wikipedia.org/wiki/Bonsai',
      target: '_blank',  // default is _self, which opens in the same window (_blank in new window)
      description: 'Bonsai is a Japanese art form using miniature trees grown in containers.'
   },
   {
      src: 'images/3.jpg',
      url: 'http://en.wikipedia.org/wiki/Red_telephone_box',
      description: 'The red telephone box is a familiar sight on the streets of the United Kingdom.'
   },
   {
      src: 'images/forrest.jpg',
			description: '',
   },
   {
      src: 'images/leaves.jpg',
			url: 'http://en.wikipedia.org/wiki/Autumn',
      description: 'Autumn marks the transition from summer into winter, in September (Northern Hemisphere) or March (Southern Hemisphere).'
   },
   {
      src: 'images/village.jpg',
			description: '',
   }
];


jQuery(function(){

	$('#unhookshow').shockwave(imagesDataArray, {
	 'slider-type': 'UnhookedSlider',
   'random-time-to-unhook': 1500, // in ms
   'free-fall-time': 150, // ms
	 'autostart-slideshow': true,
	 'maximum-slideshow-cycles': 2,
	 'slideshow-delay': 2000,
	 'duration': 100,
   'tiles-in-x': 5,
   'tiles-in-y': 5,
	 'show-permanent-description': false,
	 'standard-control-buttons-area': $('#unhookbuttons'),
	 'viewport-dimension': {width: 800, height: 262}
	});



	$('#flipedge').shockwave(imagesDataArray, {
	 'slider-type': 'FlipEdgeSlider',
   'tiles-in-x': 7,
   'tiles-in-y': 1,
   'fixed-rotation-axis': [1, 0, 0],
   'controller-default-wave-origin': ['50%', '50%'],
	 'autostart-slideshow': true
	});

	$('#cubeslider').shockwave(imagesDataArray, {
   'slider-type': 'CubeSlider',
   'rotation-duration': 600,  // in ms
   'tiles-in-x': 1,
   'tiles-in-y': 1,
   'rotation-axis': 'x',
	 'show-description-onimage': false,
	 'autostart-slideshow': true,
	 'viewport-dimension': {width: 870, height: 262}
	});

	$('#cubeslider2').shockwave(imagesDataArray, {
   'slider-type': 'CubeSlider',
   'rotation-duration': 600,  // in ms
   'tiles-in-x': 5,
   'tiles-in-y': 1,
   'wave-fixed-origin': [0, 0],
	 'standard-control-buttons-area': null,
   'next-slide-button': $('#cubeslider2next'),
   'previous-slide-button': $('#cubeslider2prev'),
   'play-pause-slideshow-buttons': $('#cubeslider2playpause')
	});

})

</script>

</head>
<body class="body">
<header class="mainHeader">
	<img src=""/>
    <nav>
        	<ul>
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">2ndMenu</a></li>
				<li><a href="#">3rdMenu</a></li>
				<li><a href="#">Contact US</a></li>
			</ul>
    </nav>
</header>
<div id='cubeslider'></div>
<div class="mainContent">
	
	<div>
		<article class="mainArticle">
			<header class="firstArticle">
    			<h2><a href="#" rel="bookmark" title="My First html App">First article</a></h2>
    		</header>
    		<footer class="authorName">
    			<p class="post-info">This article is written by Lloyd on 13th March 2014</p>
    		</footer>
    		<content>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 		enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 		     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
				<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
			</content>
		</article>
	</div>
</div>
<footer class="mainFooter">
		<p>Copyright &copy; 2014 <a href="#">Lloyd Presly Saldanha</a></p>
</footer>
</body>
</html>